<template>
  <view class="w-card">
    <view class="flex-top" @tap="toPath('/shop/store/index')">
      <up-avatar src="https://picsum.photos/200" shape="square" size="60"></up-avatar>
      <view style="margin-left: 20rpx">
        <view class="u-f-sxl">第七六人类</view>
        <view class="flex u-f-sl f-c-6 p-c-10">
          <view class="flex-img">
            <image src="/static/icon/shop/pingjia.png"
                   style="width: 30rpx;height: 30rpx"/>
            <view style="margin-left: 2rpx">4.7</view>
          </view>
          <view class="p-r-15">|</view>
          <view>1.3万粉丝</view>
        </view>
      </view>
      <view class="concern flex">
        <up-icon name="plus" color="#fff" size="20rpx" style="margin-right: 5rpx"></up-icon>
        关注
      </view>
    </view>
    <view class="grid-3 u-f-sl p-20" style="margin-top: 20rpx;background: #eee;border-radius: 10rpx">
      <view>
        <view class="f-c-3">宝贝质量4.7 <span>高</span></view>
        <view class="u-f-sm f-c-6" style="margin-top: 10rpx">好评率95%</view>
      </view>
      <view>
        <view class="f-c-3">物流速度4.7 <span>高</span></view>
        <view class="u-f-sm f-c-6" style="margin-top: 10rpx">平均两天内发货</view>
      </view>
      <view>
        <view class="f-c-3">服务保障4.7 <span>高</span></view>
        <view class="u-f-sm f-c-6" style="margin-top: 10rpx">客户满意度93%</view>
      </view>
    </view>
    <view class="flex-around u-f-sl " style="margin-top: 20rpx">
      <view class="flex-img" @tap="toPath('/shop/store/index')">
        <image src="/static/icon/shop/dianpu.png" style="width: 32rpx;height: 32rpx;"/>
        进店逛逛
      </view>
      <view class="f-c-9">|</view>
      <view class="flex-img" @tap="toPath('/shop/store/index')">
        <image src="/static/icon/shop/shangpin.png" style="width: 32rpx;height: 32rpx;"/>
        全部宝贝
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">

import {toPath} from "@/util/router/router";
</script>

<style scoped lang="scss">
@import "@/static/css/index.css";

.concern {
  background: linear-gradient(-60deg, #fe7503 0%, #fd4b03 100%);
  color: #fff;
  font-size: 26rpx;
  padding: 10rpx 20rpx;
  margin: auto 0 auto auto;
  border-radius: 10rpx;

  &:active {
    background: linear-gradient(-60deg, #e86b03 0%, #e74402 100%);
  }
}
</style>
